<!DOCTYPE html>
{% load static %}
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>接口测试平台</title>py
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
    body{
      margin:0px;
      width:100%;
      min-width:1100px;
      max-width:100%;
      height:100%;
    }
        .navbar-nav.navbar-right{
        margin-right: 0px;
    }
    @media (min-width: 768px){
        .navbar-right{
        float: right !important;
        }
    }
    @media only screen and (min-width: 767px){
        .navbar-nav>li>a {
            padding: 8px 15px;
            margin-top: 16px;
            display: block;
            position: relative;
        }
    }
</style>
</head>
<body>     
<nav  class="navbar navbar-fixed-top navbar-has-shadow">
    <div  class="container">
        <div id="navbar-collapse" class="navbar-collapse collapse" aria-expanded="false">
           <ul class="nav navbar-nav navbar-right">
               <li><a id="user-idle" href="#" class="glyphicon glyphicon-user">&nbsp{{user}}</a></li>
               <li><a id="logout-btn" href="/login/" target="_top">退出</a></li>
           </ul>
        </div>
    </div>
</nav>
<div class="col-sm-offset-5" style="font-size: 20px;color: #53245d;padding-top: 50px">
    <h5 href="#" style="font-size: 25px">关键字添加与使用</h5>
</div>
<form class="navbar-form" method="get" action="//">
    <div class="form-group" style="margin-left: 94px; margin-top: 30px">
        <input id="ipt2" name="project_name" type="text" placeholder="关键字搜索" class="form-control">
        <button id="btn4" type="submit" class="btn btn-default" style="background:#53245d;color: white">搜索</button>
    </div>
    {% csrf_token %}
</form>
<select class="selectpicker show-tick form-control" data-live-search="true" style="width: 200px;margin-left: 400px;margin-top: -45px">
    <option>Selenium2Library</option>
    <option>SikuliLibrary</option>
    <option>Builtin</option>
</select>
<button class="btn btn-default" style="background:#53245d;margin-left:600px;color:white;margin-top: -57px" data-toggle="modal" data-target="#myModal3"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button>
<div class="container" style="width: 1450px">
    <table id="table" class="table table-striped table-hover table-bordered"  style="margin-left:0px;margin-top: -20px;table-layout: fixed">
        <thead>
        <tr>
            <th>ID</th><th>库名</th><th>关键字</th><th>参数</th><th>使用说明</th><th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for keyword in keywords %}
        <tr>
            <td>{{ keyword.keyword_id}}</td>
            <td>{{ keyword.library }}</td>
            <td>{{ keyword.keyword }}</td>
            <td>{{ keyword.parameter }}</td>
            <td>{{ keyword.comment }}</td>
            <td><button class="btn btn-default sm" data-toggle="modal"  data-target="#myModal2" type="button" onclick="go_edit('{{ keyword.keyword_id }}')">编辑</button>
                <button class="btn btn-default sm" data-toggle="modal"  data-target="#myModal4" type="button" onclick="go_delete('{{ keyword.keyword_id }}')" >删除</button>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{#新增模态框#}
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times</button>
                <h6 class="modal-title" id="myModalLabel3"><strong>修改项目</strong></h6>
            </div>
            <div class="modal-body">
                <form role="form" class="form-group" id="change_form">
                    <label for="modelname">库名</label>
                    <input type="text"  name="addmodel" class="form-control" id="addlibrary" placeholder="库名">
                    <label for="casename">关键字</label>
                    <input type="text" name="addcase" class="form-control" id="addkeyword" placeholder="关键字">
                    <label for="changeUrl">参数</label>
                    <input type="text" name="addcasedesc" class="form-control" id="addparames" placeholder="参数">
                    <label for="changecharger">使用说明</label>
                    <input type="text" name="addcharger" class="form-control" id="addcomment" placeholder="使用说明">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit"  class="btn btn-default" id="adddata" style="background:#53245d;color:white;">提交</button>
                    </div>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
</div>
{#删除模态框#}
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"><strong>删除用例</strong></div>
            <h6 class="modal-title" id="myModalLabel" style="color: #53245d; margin-left: 200px;font-size: 15px"><strong>删除后无法撤销，请确认</strong></h6>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" name="deleBtn" id="deleBtn"  data-dismiss="modal"  style="background:#53245d;color:white;">删除</button>
            </div>
            {% csrf_token %}
        </div>
    </div>
</div>
{#编辑模态框#}
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times</button>
                <h6 class="modal-title" id="myModalLabel3"><strong>修改项目</strong></h6>
            </div>
            <div class="modal-body">
                <form role="form" class="form-group" id="change_form" method="POST">
                    <label for="modelname">库名</label>
                    <input type="text"  name="addmodel" class="form-control" id="editlibrary" placeholder="库名">
                    <label for="casename">关键字</label>
                    <input type="text" name="addcase" class="form-control" id="editkeyword" placeholder="关键字">
                    <label for="changeUrl">参数</label>
                    <input type="text" name="addcasedesc" class="form-control" id="editparames" placeholder="参数">
                    <label for="changecharger">使用说明</label>
                    <input type="text" name="addcharger" class="form-control" id="editcomment" placeholder="使用说明">
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit"  class="btn btn-default" id="editcheckdata" style="background:#53245d;color:white;">提交</button>
                    </div>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
</div>
<nav>
    <div class="pager pagination" id="pager">
        <span class="step-links">
        {% if keywords.has_previous %}
        <li class="previous"><a href="?page={{keywords.previous_page_number}}" style="margin-left: 600px">上一页</a></li>
        {% else %}
        <li class="previous disabled"><a href="#" style="margin-left: 600px">上一页</a></li>
        {% endif %}
        {% for num in keywords.paginator.page_range %}
        {% if num == currentPage %}
        <li class="item active"><a href="?page={{num}}" >{{num}}</a></li>
        {% else %}
        <li class="item"><a href="?page={{num}}" >{{num}}</a></li>
        {% endif %}
        {% endfor %}
        {% if keywords.has_next %}
        <li class="next"><a href="?page={{keywords.next_page_number}}">下一页</a></li>
        {% else %}
        <li class="next disabled"><a href="#">下一页</a></li>
        {% endif %}
        </span>
    </div>
</nav>
</body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    //点击保存模态框中的数值
    $("#adddata").click(function(){
      $.ajax({
          cache: false,
          url: "save/",
          type: 'POST',
          dataType: 'text',
          async: false,
          data: {
              "library":$("#addlibrary").val(),
              "keyword":$("#addkeyword").val(),
              "parames":$("#addparames").val(),
              "comment":$("#addcomment").val(),
          },
          success: function (data) {
              alert("提交成功");
              window.location.reload();
              console.log(data);
          },
          error: function (data) {
              console.log(data);
              alert("数据重复/提交失败");
          },
      });
    });
    var keywordid;
    function go_delete (id) {
        keywordid = id;
        console.info(id);
    }
    $("#deleBtn").click(function() {
        $.ajax({
            cache: false,
            url: "delete_id/",
            dataType: 'text',
            type: 'POST',
            async: false,
            data: {
                "id": keywordid
            },
            success: function (data) {
                alert('删除成功');
                window.location.reload()
            },
            error: function (data) {
                console.log(data);
                alert('删除失败')
            }
        })

    });
    //点击编辑按键
    var edit_id;
    function go_edit(id) {
        edit_id = id;
    }
    //提交编辑数据
    $("#editcheckdata").click(function() {
        $.ajax({
            cache: false,
            url: "save_edit/",
            type: 'POST',
            dataType: 'text',
            async: false,
            data: {
                "id":edit_id,
                "editlibrary":$("#editlibrary").val(),
                "editkeyword":$("#editkeyword").val(),
                "editparames":$("#editparames").val(),
                "editcomment":$("#editcomment").val(),
            },
            success: function (data) {
                alert('更改成功');
                window.location.reload()
            },
            error:function (data) {
                console.log(data);
                alert('更改失败')
            }
        })
    });
{#    <span style="font-size:18px;">$(window).resize(function() {#}
{#        var wwww = $(window).width(),#}
{#            hhhh = $(window).height();#}
{#        $("body").css({#}
{#        "width":wwww,#}
{#        "height":hhhh,#}
{#        "overflow":"hidden"#}
{#        });#}
{#        if(wwww<=1000){#}
{#            $("body").css({#}
{#                "overflow":"auto"#}
{#            });#}
{#            }     #}
{#    })</span>#}


</script>
</html>